﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br />
    <br />

    <h3 class="spliter">默认样式</h3>
    <div id="progress1"></div>
    <div id="progress2"></div>
    <div id="progress3"></div>

    <h3 class="spliter">设置背景色和进度条颜色</h3>
    <div id="progress11"></div>
    <div class="rayui-pgcolor-red" id="progress12"></div>
    <div class="rayui-pgcolor-green" id="progress13"></div>
    <div class="rayui-pgcolor-blue" id="progress14"></div>
    <div class="rayui-pgcolor-orange" id="progress15"></div>

    <h3 class="spliter">自定义进度条尺寸</h3>
    <div id="progress21"></div>
    <div id="progress22"></div>
    <div id="progress23"></div>
    <div id="progress24"></div>

    <h3 class="spliter">显示标签</h3>
    <div id="progress31"></div>
    <div id="progress32"></div>
    <div id="progress33"></div>
    <div id="progress34"></div>

    <h3 class="spliter">花纹</h3>
    <div class="progress-striped" id="progress41"></div>
    <div class="rayui-pgcolor-red progress-striped" id="progress42"></div>
    <div class="rayui-pgcolor-green progress-striped" id="progress43"></div>
    <div class="rayui-pgcolor-blue progress-striped" id="progress44"></div>
    <div class="rayui-pgcolor-orange progress-striped" id="progress45"></div>


    <h3 class="spliter">动态改变进度</h3>
    <div class="progress-striped" id="progress51"></div>
    <button class="rayui-btn btn-primary" id="loading">模拟加载</button>

    <h3 class="spliter">预定义过程颜色，建议设置对应的min和max颜色值</h3>
    <div class="progress-striped" id="progress61"></div>
    <button class="rayui-btn btn-primary" id="loading61">模拟加载</button>
    

    <script>
        rayui.use(["elem"], function () {
            
            //默认样式
            $("#progress1").progress(30);
            $("#progress2").progress(60);
            $("#progress3").progress(90);

            //背景色和进度条颜色
            $("#progress11").progress({
                progress: 30,
                bgcolor: '#555'
            });
            $("#progress12").progress({
                progress: 50,
                bgcolor: '#555'
            });
            $("#progress13").progress({
                progress: 60,
                bgcolor: '#555'
            });

            $("#progress14").progress({
                progress: 70,
                bgcolor: '#555'
            });

            $("#progress15").progress({
                progress: 80,
                bgcolor: '#555'
            });

            //尺寸
            $("#progress21").progress({
                progress: 30,
                height: 6
            });
            $("#progress22").progress({
                progress: 50,
                height: 12,
                color: '#FFB800'
            });
            $("#progress23").progress({
                progress: 70,
                height: 16,
                color: '#28a0bb'
            });
            $("#progress24").progress({
                progress: 80,
                height: 20,
                color: '#d9534f'
            });

            //标签
            $("#progress31").progress({
                progress: 30,
                height: 6,
                label: 'top'
            });
            $("#progress32").progress({
                progress: 40,
                height: 10,
                label: 'bottom'
            });
            $("#progress33").progress({
                progress: 50.123,
                height: 16,
                label: 'middle'
            });
            $("#progress34").progress({
                progress: 60,
                height: 20,
                label: 'top'
            }).setLabel("60 / 100，红色", "#f00");


            //花纹
            $("#progress41").progress({
                progress: 30,
                height: 16
            });
            $("#progress42").progress({
                progress: 50,
                height: 16
            });
            $("#progress43").progress({
                progress: 70,
                height: 16
            });
            $("#progress44").progress({
                progress: 80,
                height: 16
            });
            $("#progress45").progress({
                progress: 90,
                height: 16
            });



            //动态
            var proIns51 = $("#progress51").progress({
                progress: 0,
                height: 16,
                label: 'middle'
            });
            var progress = 0;
            function callprogress() {
                progress += rayui.random(5, 15);
                if (progress > 100) {
                    progress = 100;
                    $("#loading").prop("disabled", false);
                }
                proIns51.setProgress(progress);
                if (progress !== 100)
                    setTimeout(callprogress, 1000);
            }
            $("#loading").click(function () {
                progress = 0;
                callprogress();
                $(this).prop("disabled", true);
            });


            //预定义颜色
            var proIns61 = $("#progress61").progress({
                progress: 0,
                height: 16,
                label: 'middle',
                processColors: [{ 30: "#cc6f10" }, { 80:"#2e8b57"}]
            });
            var progress61 = 0;
            function callprogress61() {
                progress61 += rayui.random(5, 15);
                if (progress61 > 100) {
                    progress61 = 100;
                    $("#loading61").prop("disabled", false);
                }
                proIns61.setProgress(progress61);
                if (progress61 !== 100)
                    setTimeout(callprogress61, 1000);
            }
            $("#loading61").click(function () {
                progress61 = 0;
                callprogress61();
                $(this).prop("disabled", true);
            });
            

        });

    </script>

    <h4 id="anchor">使用说明</h4>
    <pre class="word-wrap" style="color: #159200; ">

使用说明：
$("selector").progress(option)，option可以是数值也可以是obj对象，为数值时即为进度值

属性：
progress:数值，和min、max对应
color: 完成颜色值，默认浅绿色(#47b766)，rayui-pgcolor-red(红色)、rayui-pgcolor-orange(橘色)、rayui-pgcolor-blue(蓝色)、rayui-pgcolor-green(绿色)
bgcolor: 背景颜色值，默认为灰色(#eee)
height: 数值，滚动条高度，默认10，即10px
label: 是否显示标签，默认不显示，可选top、middle、bottom，全部默认在右边
max: 最大值，默认100
min: 最小值，默认0
processColors: 过程颜色，数组，例如[{20: "#f00"},{80: "#0f0"}]，大于20为红色，大于80为绿色，这里的20和80为数值，不是百分比，和min、max对应，
                        当无min对应的颜色时自动默认为红色#d43838，当无max对应颜色时自动默认为绿色#2e8b57


方法：
setLabel: function (str, color) 设置标签内容，color为标签颜色值
setProgress: function (progress, lbl) 设置进度，lbl为是否修改标签，可选true|false，如果不填则自动判断，如果填写则按填写
setColor: function (color)设置完成颜色值
</pre>

</body>
</html>